<template>
  <div class="traffic-detail" :class="{ 'mobile-layout': isMobileDevice }">
    <el-container>
      <!-- 移动端头部 -->
      <el-header class="mobile-header" v-if="isMobileDevice">
        <div class="mobile-header-content">
          <el-button 
            type="text" 
            class="mobile-back-btn" 
            v-if="!isMonitorMode"
            @click="handleBackHome"
          >
            <el-icon><ArrowLeft /></el-icon>
          </el-button>
          <h1>流量详情</h1>
          <el-button 
            type="text" 
            class="mobile-refresh-btn" 
            @click="refreshData" 
            :loading="refreshLoading"
          >
            <el-icon><Refresh /></el-icon>
          </el-button>
        </div>
      </el-header>

      <!-- 桌面端头部 -->
      <el-header v-else>
        <div class="header-content">
          <h1>流量详情监控</h1>
          <div class="actions">
            <el-button 
              type="primary" 
              @click="refreshData" 
              :loading="refreshLoading"
            >
              刷新数据
            </el-button>
            <el-button v-if="!isMonitorMode" @click="handleBackHome">
              返回主页
            </el-button>
          </div>
        </div>
      </el-header>

      <el-main v-loading="loading" class="main-content">
        <div v-if="trafficData" class="traffic-container">
          <!-- 移动端导航标签 -->
          <div v-if="isMobileDevice" class="mobile-tabs">
            <div class="mobile-tab-nav">
              <div 
                v-for="tab in tabs" 
                :key="tab.name"
                :class="['mobile-tab-item', { active: activeTab === tab.name }]"
                @click="activeTab = tab.name"
              >
                <el-icon>
                  <component :is="tab.icon" />
                </el-icon>
                <span>{{ tab.label }}</span>
              </div>
            </div>
          </div>

          <!-- 移动端内容区域 -->
          <div v-if="isMobileDevice" class="mobile-content">
            <!-- 跳点Tab内容 -->
            <div v-show="activeTab === 'jump'" class="mobile-tab-content">
              <!-- 跳点和免流概览 -->
              <div class="mobile-overview-cards">
                <div class="mobile-stat-card jump-card">
                  <div class="mobile-stat-value jump">{{ formatTraffic(currentData.general_used-previousData.general_used)  }}</div>
                  <div class="mobile-stat-label">跳点</div>
                </div>
                <div class="mobile-stat-card free-card">
                  <div class="mobile-stat-value free">{{ formatTraffic(currentData.directed_used-previousData.directed_used)   }}</div>
                  <div class="mobile-stat-label">免流</div>
                </div>
              </div>

              <!-- 时间信息 -->
              <div class="time-info-card">
                <div class="time-diff-info">
                  距离上次时间: {{ timeDiff }}
                </div>
              </div>

              <!-- 本次流量进度条 -->
              <div class="mobile-data-section current-section">
                <div class="section-title current">
                  本次 {{ formatDetailTime(currentData.query_time) }}
                </div>
                
                <!-- 通用流量进度条 -->
                <TrafficProgressBar
                  title="通用流量"
                  :used="currentData.general_used"
                  :remaining="currentData.general_remaining"
                  :total="currentData.general_used + currentData.general_remaining"
                  type="general"
                  :icon="DataBoard"
                />
                
                <!-- 定向流量进度条 -->
                <TrafficProgressBar
                  title="定向流量"
                  :used="currentData.directed_used"
                  :remaining="currentData.directed_remaining"
                  :total="currentData.directed_used + currentData.directed_remaining"
                  type="directed"
                  :icon="TrendCharts"
                />
                
                <!-- 公免流量 -->
                <div class="public-free-card">
                  <div class="public-free-header">
                    <el-icon class="public-free-icon"><TrendCharts /></el-icon>
                    <span class="public-free-title">公免流量</span>
                  </div>
                  <div class="public-free-value">{{ formatTraffic(currentData.public_free, false) }}</div>
                </div>
              </div>

              <!-- 上次数据对比 -->
              <div class="mobile-data-section previous-section">
                <div class="section-title previous">
                  上次 {{ formatDetailTime(previousData.query_time) }}
                </div>
                
                <!-- 上次通用流量进度条 -->
                <TrafficProgressBar
                  title="通用流量"
                  :used="previousData.general_used"
                  :remaining="previousData.general_remaining"
                  :total="previousData.general_used + previousData.general_remaining"
                  type="general"
                  :icon="DataBoard"
                />
                
                <!-- 上次定向流量进度条 -->
                <TrafficProgressBar
                  title="定向流量"
                  :used="previousData.directed_used"
                  :remaining="previousData.directed_remaining"
                  :total="previousData.directed_used + previousData.directed_remaining"
                  type="directed"
                  :icon="TrendCharts"
                />
                
                <!-- 上次公免流量 -->
                <div class="public-free-card">
                  <div class="public-free-header">
                    <el-icon class="public-free-icon"><TrendCharts /></el-icon>
                    <span class="public-free-title">公免流量</span>
                  </div>
                  <div class="public-free-value">{{ formatTraffic(previousData.public_free, false) }}</div>
                </div>
              </div>
            </div>

            <!-- 详情Tab内容 -->
            <div v-show="activeTab === 'detail'" class="mobile-tab-content">
              <!-- 套餐基本信息 -->
              <div class="mobile-package-header">
                <h3 class="mobile-package-name">{{ trafficData.latest?.package_name || '未知套餐' }}</h3>
                <div class="mobile-package-meta">
                  <span class="mobile-phone-operator">{{ maskPhoneNumber(trafficData.config?.phone) }} | {{ trafficData.config?.operator }}</span>
                  <span class="mobile-update-time">{{ formatTime(trafficData.latest?.query_time) }}</span>
                </div>
              </div>

              <!-- 跳点和免流信息 -->
              <div class="mobile-jump-freeflow-section">
                <div class="mobile-jump-freeflow-item">
                  <span class="label">跳点:</span>
                  <span class="value">{{ trafficData.latest?.jump_points || 0 }} MB</span>
                </div>
                <div class="mobile-jump-freeflow-item">
                  <span class="label">免流:</span>
                  <span class="value">{{ trafficData.latest?.freeflow || 0 }} MB</span>
                </div>
              </div>

              <!-- 通用流量部分 -->
              <div class="mobile-traffic-section">
                <TrafficProgressBar
                  title="通用流量"
                  :used="trafficData.latest?.general_used || 0"
                  :remaining="trafficData.latest?.general_remaining || 0"
                  :total="(trafficData.latest?.general_used || 0) + (trafficData.latest?.general_remaining || 0)"
                  type="general"
                  :icon="DataBoard"
                />
                
                <!-- 通用流量详细列表 -->
                <div v-if="trafficData.latest?.detailed_data?.generalFlow?.details?.length" class="mobile-detailed-list">
                  <div 
                    v-for="(item, index) in trafficData.latest.detailed_data.generalFlow.details" 
                    :key="index"
                    class="mobile-detailed-item"
                  >
                    <div class="mobile-item-header">
                      <span class="mobile-item-name">{{ item.name }}</span>
                      <el-tag :type="getUsageType(item.used, item.total)" size="small">
                        {{ item.usedPercent }}%
                      </el-tag>
                    </div>
                    <div class="mobile-item-details">
                      <div class="mobile-item-progress">
                        <el-progress 
                          :percentage="parseFloat(item.usedPercent)" 
                          :color="getProgressColor(parseFloat(item.usedPercent))"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="mobile-item-stats">
                        <span class="mobile-stat-item used">
                          <el-icon><Download /></el-icon>
                          已用: <span class="value">{{ formatTraffic(item.used) }}</span>
                        </span>
                        <span class="mobile-stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          剩余: <span class="value">{{ formatTraffic(item.remaining) }}</span>
                        </span>
                        <span class="mobile-stat-item total">
                          <el-icon><DataBoard /></el-icon>
                          总计: <span class="value">{{ formatTraffic(item.total) }}</span>
                        </span>
                      </div>
                      <div class="mobile-item-meta" v-if="item.feePolicyName">
                        <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                      </div>
                      <div class="mobile-item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                        <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 定向流量部分 -->
              <div class="mobile-traffic-section">
                <TrafficProgressBar
                  title="定向流量"
                  :used="trafficData.latest?.directed_used || 0"
                  :remaining="trafficData.latest?.directed_remaining || 0"
                  :total="(trafficData.latest?.directed_used || 0) + (trafficData.latest?.directed_remaining || 0)"
                  type="directed"
                  :icon="TrendCharts"
                />
                
                <!-- 定向流量详细列表 -->
                <div v-if="trafficData.latest?.detailed_data?.directedFlow?.details?.length" class="mobile-detailed-list">
                  <div 
                    v-for="(item, index) in trafficData.latest.detailed_data.directedFlow.details" 
                    :key="index"
                    class="mobile-detailed-item"
                  >
                    <div class="mobile-item-header">
                      <span class="mobile-item-name">{{ item.name }}</span>
                      <el-tag :type="getUsageType(item.used, item.total)" size="small">
                        {{ item.usedPercent }}%
                      </el-tag>
                    </div>
                    <div class="mobile-item-details">
                      <div class="mobile-item-progress">
                        <el-progress 
                          :percentage="parseFloat(item.usedPercent)" 
                          :color="getProgressColor(parseFloat(item.usedPercent))"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="mobile-item-stats">
                        <span class="mobile-stat-item used">
                          <el-icon><Download /></el-icon>
                          已用: <span class="value">{{ formatTraffic(item.used) }}</span>
                        </span>
                        <span class="mobile-stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          剩余: <span class="value">{{ formatTraffic(item.remaining) }}</span>
                        </span>
                        <span class="mobile-stat-item total">
                          <el-icon><DataBoard /></el-icon>
                          总计: <span class="value">{{ formatTraffic(item.total) }}</span>
                        </span>
                      </div>
                      <div class="mobile-item-meta" v-if="item.feePolicyName">
                        <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                      </div>
                      <div class="mobile-item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                        <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 语音部分 -->
              <div v-if="trafficData.latest?.detailed_data?.voice?.details?.length" class="mobile-traffic-section">
                <TrafficProgressBar
                  title="语音"
                  :used="trafficData.latest.detailed_data.voice.details.reduce((sum, item) => sum + item.used, 0)"
                  :remaining="trafficData.latest.detailed_data.voice.details.reduce((sum, item) => sum + item.remaining, 0)"
                  :total="trafficData.latest.detailed_data.voice.details.reduce((sum, item) => sum + item.total, 0)"
                  type="voice"
                  :icon="Phone"
                />
                
                <!-- 语音详细列表 -->
                <div class="mobile-detailed-list">
                  <div 
                    v-for="(item, index) in trafficData.latest.detailed_data.voice.details" 
                    :key="index"
                    class="mobile-detailed-item"
                  >
                    <div class="mobile-item-header">
                      <span class="mobile-item-name">{{ item.name }}</span>
                      <el-tag :type="getUsageType(item.used, item.total)" size="small">
                        {{ item.usedPercent }}%
                      </el-tag>
                    </div>
                    <div class="mobile-item-details">
                      <div class="mobile-item-progress">
                        <el-progress 
                          :percentage="parseFloat(item.usedPercent)" 
                          :color="getProgressColor(parseFloat(item.usedPercent))"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="mobile-item-stats">
                        <span class="mobile-stat-item used">
                          <el-icon><Download /></el-icon>
                          已用: <span class="value">{{ item.used }} 分钟</span>
                        </span>
                        <span class="mobile-stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          剩余: <span class="value">{{ item.remaining }} 分钟</span>
                        </span>
                        <span class="mobile-stat-item total">
                          <el-icon><DataBoard /></el-icon>
                          总计: <span class="value">{{ item.total }} 分钟</span>
                        </span>
                      </div>
                      <div class="mobile-item-meta" v-if="item.feePolicyName">
                        <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                      </div>
                      <div class="mobile-item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                        <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 其他类型流量部分 -->
              <div v-if="trafficData.latest?.detailed_data?.otherFlow?.details?.length" class="mobile-traffic-section">
                <TrafficProgressBar
                  title="其他类型流量"
                  :used="trafficData.latest.detailed_data.otherFlow.details.reduce((sum, item) => sum + item.used, 0)"
                  :remaining="trafficData.latest.detailed_data.otherFlow.details.reduce((sum, item) => sum + item.remaining, 0)"
                  :total="trafficData.latest.detailed_data.otherFlow.details.reduce((sum, item) => sum + item.total, 0)"
                  type="other"
                  :icon="Grid"
                />
                
                <!-- 其他类型流量详细列表 -->
                <div class="mobile-detailed-list">
                  <div 
                    v-for="(item, index) in trafficData.latest.detailed_data.otherFlow.details" 
                    :key="index"
                    class="mobile-detailed-item"
                  >
                    <div class="mobile-item-header">
                      <span class="mobile-item-name">{{ item.name }}</span>
                      <el-tag :type="getUsageType(item.used, item.total)" size="small">
                        {{ item.usedPercent }}%
                      </el-tag>
                    </div>
                    <div class="mobile-item-details">
                      <div class="mobile-item-progress">
                        <el-progress 
                          :percentage="parseFloat(item.usedPercent)" 
                          :color="getProgressColor(parseFloat(item.usedPercent))"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="mobile-item-stats">
                        <span class="mobile-stat-item used">
                          <el-icon><Download /></el-icon>
                          已用: <span class="value">{{ formatTraffic(item.used) }}</span>
                        </span>
                        <span class="mobile-stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          剩余: <span class="value">{{ formatTraffic(item.remaining) }}</span>
                        </span>
                        <span class="mobile-stat-item total">
                          <el-icon><DataBoard /></el-icon>
                          总计: <span class="value">{{ formatTraffic(item.total) }}</span>
                        </span>
                      </div>
                      <div class="mobile-item-meta" v-if="item.feePolicyName">
                        <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                      </div>
                      <div class="mobile-item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                        <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 短信部分 -->
              <div v-if="trafficData.latest?.detailed_data?.sms?.details?.length" class="mobile-traffic-section">
                <TrafficProgressBar
                  title="短信"
                  :used="trafficData.latest.detailed_data.sms.details.reduce((sum, item) => sum + item.used, 0)"
                  :remaining="trafficData.latest.detailed_data.sms.details.reduce((sum, item) => sum + item.remaining, 0)"
                  :total="trafficData.latest.detailed_data.sms.details.reduce((sum, item) => sum + item.total, 0)"
                  type="sms"
                  :icon="Message"
                />
                
                <!-- 短信详细列表 -->
                <div class="mobile-detailed-list">
                  <div 
                    v-for="(item, index) in trafficData.latest.detailed_data.sms.details" 
                    :key="index"
                    class="mobile-detailed-item"
                  >
                    <div class="mobile-item-header">
                      <span class="mobile-item-name">{{ item.name }}</span>
                      <el-tag :type="getUsageType(item.used, item.total)" size="small">
                        {{ item.usedPercent }}%
                      </el-tag>
                    </div>
                    <div class="mobile-item-details">
                      <div class="mobile-item-progress">
                        <el-progress 
                          :percentage="parseFloat(item.usedPercent)" 
                          :color="getProgressColor(parseFloat(item.usedPercent))"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="mobile-item-stats">
                        <span class="mobile-stat-item used">
                          <el-icon><Download /></el-icon>
                          已用: <span class="value">{{ item.used }} 条</span>
                        </span>
                        <span class="mobile-stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          剩余: <span class="value">{{ item.remaining }} 条</span>
                        </span>
                        <span class="mobile-stat-item total">
                          <el-icon><DataBoard /></el-icon>
                          总计: <span class="value">{{ item.total }} 条</span>
                        </span>
                      </div>
                      <div class="mobile-item-meta" v-if="item.feePolicyName">
                        <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                      </div>
                      <div class="mobile-item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                        <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 数据源信息 -->
              <div v-if="trafficData.latest?.data_source === 'new-api'" class="mobile-data-source-info">
                <el-alert
                  title="新数据源"
                  type="success"
                  :closable="false"
                  show-icon
                >
                  <template #default>
                    采用新的数据格式，提供更详细的流量信息
                  </template>
                </el-alert>
              </div>

              <div v-else class="mobile-no-detailed-data">
                <el-empty description="暂无详细数据">
                  <template #image>
                    <el-icon size="60" color="#c0c4cc"><DataBoard /></el-icon>
                  </template>
                  <el-text type="info" size="small">
                    当前数据源可能不支持详细数据展示，请尝试刷新数据
                  </el-text>
                </el-empty>
              </div>
            </div>

            <!-- 历史Tab内容 -->
            <div v-show="activeTab === 'history'" class="mobile-tab-content">
              <div class="mobile-history-content">
                <h3>历史记录</h3>
                <div class="mobile-history-list">
                  <div 
                    v-for="record in trafficData.history" 
                    :key="record.id"
                    class="history-item"
                  >
                    <div class="history-time">{{ formatTime(record.query_time) }}</div>
                    <div class="history-stats">
                      <div class="stat">
                        <span class="label">总流量</span>
                        <span class="value">{{ record.total_traffic?.toFixed(2) }}GB</span>
                      </div>
                      <div class="stat">
                        <span class="label">已用</span>
                        <span class="value">{{ record.used_traffic?.toFixed(2) }}GB</span>
                      </div>
                      <div class="stat">
                        <span class="label">剩余</span>
                        <span class="value">{{ record.remaining_traffic?.toFixed(2) }}GB</span>
                      </div>
                      <div class="stat">
                        <span class="label">跳点</span>
                        <span class="value">{{ record.jump_points }}MB</span>
                      </div>
                      <div class="stat">
                        <span class="label">免流</span>
                        <span class="value">{{ record.freeflow || 0 }}MB</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 推送Tab内容 -->
            <div v-show="activeTab === 'push'" class="mobile-tab-content">
              <div class="mobile-empty">
                <el-icon class="empty-icon"><Bell /></el-icon>
                <div>推送功能开发中...</div>
              </div>
            </div>
          </div>

          <!-- 桌面端标签页 -->
          <el-tabs v-else v-model="activeTab" type="border-card" class="desktop-tabs">
            <!-- 跳点标签 -->
            <el-tab-pane label="跳点" name="jump">
              <div class="jump-tab-content">
                <!-- 跳点和免流概览 -->
                <div class="info-row">
                  <span class="jump-points">跳点: {{ formatTraffic(currentData.general_used-previousData.general_used)  }}</span>
                  <span class="free-traffic">免流: {{ formatTraffic(currentData.directed_used-previousData.directed_used)  }}</span>
                  <span class="time-diff">距离上次时间: {{ timeDiff }}</span>
                </div>

                <!-- 分隔线 -->
                <el-divider />

                <!-- 本次数据标题 -->
                <div class="time-title current">
                  ------本次 {{ formatDetailTime(currentData.query_time) }}------
                </div>

                <!-- 本次流量进度条 -->
                <div class="traffic-progress-section">
                  <!-- 通用流量进度条 -->
                  <TrafficProgressBar
                    title="通用流量"
                    :used="currentData.general_used"
                    :remaining="currentData.general_remaining"
                    :total="currentData.general_used + currentData.general_remaining"
                    type="general"
                    :icon="DataBoard"
                  />
                  
                  <!-- 定向流量进度条 -->
                  <TrafficProgressBar
                    title="定向流量"
                    :used="currentData.directed_used"
                    :remaining="currentData.directed_remaining"
                    :total="currentData.directed_used + currentData.directed_remaining"
                    type="directed"
                    :icon="TrendCharts"
                  />
                  
                  <!-- 公免流量 -->
                  <div class="public-free-card">
                    <div class="public-free-header">
                      <el-icon class="public-free-icon"><TrendCharts /></el-icon>
                      <span class="public-free-title">公免流量</span>
                    </div>
                    <div class="public-free-value">{{ formatTraffic(currentData.public_free, false) }}</div>
                  </div>
                </div>

                <!-- 上次数据标题 -->
                <div class="time-title previous">
                  ------上次 {{ formatDetailTime(previousData.query_time) }}------
                </div>

                <!-- 上次流量进度条 -->
                <div class="traffic-progress-section">
                  <!-- 上次通用流量进度条 -->
                  <TrafficProgressBar
                    title="通用流量"
                    :used="previousData.general_used"
                    :remaining="previousData.general_remaining"
                    :total="previousData.general_used + previousData.general_remaining"
                    type="general"
                    :icon="DataBoard"
                  />
                  
                  <!-- 上次定向流量进度条 -->
                  <TrafficProgressBar
                    title="定向流量"
                    :used="previousData.directed_used"
                    :remaining="previousData.directed_remaining"
                    :total="previousData.directed_used + previousData.directed_remaining"
                    type="directed"
                    :icon="TrendCharts"
                  />
                  
                  <!-- 上次公免流量 -->
                  <div class="public-free-card">
                    <div class="public-free-header">
                      <el-icon class="public-free-icon"><TrendCharts /></el-icon>
                      <span class="public-free-title">公免流量</span>
                    </div>
                    <div class="public-free-value">{{ formatTraffic(previousData.public_free, false) }}</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <!-- 详情标签 -->
            <el-tab-pane label="详情" name="detail">
              <div class="detail-tab-content">
                                <!-- 套餐基本信息 -->
                <div class="package-header">
                  <h3 class="package-name">{{ trafficData.latest?.package_name || '未知套餐' }}</h3>
                  <div class="package-meta">
                    <span class="phone-operator">{{ maskPhoneNumber(trafficData.config?.phone) }} | {{ trafficData.config?.operator }}</span>
                    <span class="update-time">{{ formatTime(trafficData.latest?.query_time) }}</span>
                  </div>
                </div>

                <!-- 分隔线 -->
                <el-divider />

                <!-- 跳点和免流信息 -->
                <div class="jump-freeflow-section">
                  <div class="jump-freeflow-item">
                    <span class="label">跳点:</span>
                    <span class="value">{{ trafficData.latest?.jump_points || 0 }} MB</span>
                  </div>
                  <div class="jump-freeflow-item">
                    <span class="label">免流:</span>
                    <span class="value">{{ trafficData.latest?.freeflow || 0 }} MB</span>
                  </div>
                </div>

                <!-- 分隔线 -->
                <el-divider />

                <!-- 通用流量部分 -->
                <div class="traffic-section">
                  <TrafficProgressBar
                    title="通用流量"
                    :used="trafficData.latest?.general_used || 0"
                    :remaining="trafficData.latest?.general_remaining || 0"
                    :total="(trafficData.latest?.general_used || 0) + (trafficData.latest?.general_remaining || 0)"
                    type="general"
                    :icon="DataBoard"
                  />
                  
                  <!-- 通用流量详细项 -->
                  <div v-if="trafficData.latest?.detailed_data?.generalFlow?.length" class="detailed-items">
                    <div v-for="item in trafficData.latest.detailed_data.generalFlow" :key="item.name" class="detailed-item">
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-progress">
                        <el-progress 
                          :percentage="item.usedPercent" 
                          :color="getProgressColor(item.usedPercent)"
                          :show-text="false"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="item-stats">
                        <div class="stat-item used">
                          <el-icon><Download /></el-icon>
                          <span>{{ (item.used / 1024).toFixed(2) }}GB</span>
                        </div>
                        <div class="stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          <span>{{ (item.remaining / 1024).toFixed(2) }}GB</span>
                        </div>
                        <div class="stat-item total">
                          <el-icon><InfoFilled /></el-icon>
                          <span>{{ (item.total / 1024).toFixed(2) }}GB</span>
                        </div>
                      </div>
                      <div class="item-meta">
                        <span v-if="item.feePolicyName" class="policy">{{ item.feePolicyName }}</span>
                        <span v-if="item.endDate" class="end-date">{{ item.endDate }}</span>
                      </div>
                    </div>
                  </div>

                  <!-- 通用流量详细列表 -->
                  <div v-if="trafficData.latest?.detailed_data?.generalFlow?.details?.length" class="detailed-list">
                    <div 
                      v-for="(item, index) in trafficData.latest.detailed_data.generalFlow.details" 
                      :key="index"
                      class="detailed-item"
                    >
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-details">
                        <div class="item-progress">
                          <el-progress 
                            :percentage="parseFloat(item.usedPercent)" 
                            :color="getProgressColor(parseFloat(item.usedPercent))"
                            :stroke-width="6"
                          />
                        </div>
                        <div class="item-stats">
                          <span class="stat-item used">
                            <el-icon><Download /></el-icon>
                            已用: <span class="value">{{ formatTraffic(item.used) }}</span>
                          </span>
                          <span class="stat-item remaining">
                            <el-icon><Upload /></el-icon>
                            剩余: <span class="value">{{ formatTraffic(item.remaining) }}</span>
                          </span>
                          <span class="stat-item total">
                            <el-icon><DataBoard /></el-icon>
                            总计: <span class="value">{{ formatTraffic(item.total) }}</span>
                          </span>
                        </div>
                        <div class="item-meta" v-if="item.feePolicyName">
                          <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                        </div>
                        <div class="item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                          <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 分隔线 -->
                <el-divider />

                <!-- 定向流量部分 -->
                <div class="traffic-section">
                  <TrafficProgressBar
                    title="定向流量"
                    :used="trafficData.latest?.directed_used || 0"
                    :remaining="trafficData.latest?.directed_remaining || 0"
                    :total="(trafficData.latest?.directed_used || 0) + (trafficData.latest?.directed_remaining || 0)"
                    type="directed"
                    :icon="TrendCharts"
                  />
                  
                  <!-- 定向流量详细项 -->
                  <div v-if="trafficData.latest?.detailed_data?.directedFlow?.length" class="detailed-items">
                    <div v-for="item in trafficData.latest.detailed_data.directedFlow" :key="item.name" class="detailed-item">
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-progress">
                        <el-progress 
                          :percentage="item.usedPercent" 
                          :color="getProgressColor(item.usedPercent)"
                          :show-text="false"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="item-stats">
                        <div class="stat-item used">
                          <el-icon><Download /></el-icon>
                          <span>{{ (item.used / 1024).toFixed(2) }}GB</span>
                        </div>
                        <div class="stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          <span>{{ (item.remaining / 1024).toFixed(2) }}GB</span>
                        </div>
                        <div class="stat-item total">
                          <el-icon><InfoFilled /></el-icon>
                          <span>{{ (item.total / 1024).toFixed(2) }}GB</span>
                        </div>
                      </div>
                      <div class="item-meta">
                        <span v-if="item.feePolicyName" class="policy">{{ item.feePolicyName }}</span>
                        <span v-if="item.endDate" class="end-date">{{ item.endDate }}</span>
                      </div>
                    </div>
                  </div>

                  <!-- 定向流量详细列表 -->
                  <div v-if="trafficData.latest?.detailed_data?.directedFlow?.details?.length" class="detailed-list">
                    <div 
                      v-for="(item, index) in trafficData.latest.detailed_data.directedFlow.details" 
                      :key="index"
                      class="detailed-item"
                    >
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-details">
                        <div class="item-progress">
                          <el-progress 
                            :percentage="parseFloat(item.usedPercent)" 
                            :color="getProgressColor(parseFloat(item.usedPercent))"
                            :stroke-width="6"
                          />
                        </div>
                        <div class="item-stats">
                          <span class="stat-item used">
                            <el-icon><Download /></el-icon>
                            已用: <span class="value">{{ formatTraffic(item.used) }}</span>
                          </span>
                          <span class="stat-item remaining">
                            <el-icon><Upload /></el-icon>
                            剩余: <span class="value">{{ formatTraffic(item.remaining) }}</span>
                          </span>
                          <span class="stat-item total">
                            <el-icon><DataBoard /></el-icon>
                            总计: <span class="value">{{ formatTraffic(item.total) }}</span>
                          </span>
                        </div>
                        <div class="item-meta" v-if="item.feePolicyName">
                          <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                        </div>
                        <div class="item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                          <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 分隔线 -->
                <el-divider />

                <!-- 语音部分 -->
                <div class="traffic-section">
                  <TrafficProgressBar
                    title="语音"
                    :used="trafficData.latest.detailed_data.voice.details.reduce((sum, item) => sum + item.used, 0)"
                    :remaining="trafficData.latest.detailed_data.voice.details.reduce((sum, item) => sum + item.remaining, 0)"
                    :total="trafficData.latest.detailed_data.voice.details.reduce((sum, item) => sum + item.total, 0)"
                    type="voice"
                    :icon="Phone"
                  />
                  
                  <!-- 语音详细项 -->
                  <div v-if="trafficData.latest?.detailed_data?.voice?.length" class="detailed-items">
                    <div v-for="item in trafficData.latest.detailed_data.voice" :key="item.name" class="detailed-item">
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-progress">
                        <el-progress 
                          :percentage="item.usedPercent" 
                          :color="getProgressColor(item.usedPercent)"
                          :show-text="false"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="item-stats">
                        <div class="stat-item used">
                          <el-icon><Phone /></el-icon>
                          <span>{{ item.used }}分钟</span>
                        </div>
                        <div class="stat-item remaining">
                          <el-icon><Clock /></el-icon>
                          <span>{{ item.remaining }}分钟</span>
                        </div>
                        <div class="stat-item total">
                          <el-icon><InfoFilled /></el-icon>
                          <span>{{ item.total }}分钟</span>
                        </div>
                      </div>
                      <div class="item-meta">
                        <span v-if="item.feePolicyName" class="policy">{{ item.feePolicyName }}</span>
                        <span v-if="item.endDate" class="end-date">{{ item.endDate }}</span>
                      </div>
                    </div>
                  </div>

                  <!-- 语音详细列表 -->
                  <div v-if="trafficData.latest?.detailed_data?.voice?.details?.length" class="detailed-list">
                    <div 
                      v-for="(item, index) in trafficData.latest.detailed_data.voice.details" 
                      :key="index"
                      class="detailed-item"
                    >
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-details">
                        <div class="item-progress">
                          <el-progress 
                            :percentage="parseFloat(item.usedPercent)" 
                            :color="getProgressColor(parseFloat(item.usedPercent))"
                            :stroke-width="6"
                          />
                        </div>
                        <div class="item-stats">
                          <span class="stat-item used">
                            <el-icon><Download /></el-icon>
                            已用: <span class="value">{{ item.used }} 分钟</span>
                          </span>
                          <span class="stat-item remaining">
                            <el-icon><Upload /></el-icon>
                            剩余: <span class="value">{{ item.remaining }} 分钟</span>
                          </span>
                          <span class="stat-item total">
                            <el-icon><DataBoard /></el-icon>
                            总计: <span class="value">{{ item.total }} 分钟</span>
                          </span>
                        </div>
                        <div class="item-meta" v-if="item.feePolicyName">
                          <el-text type="info" size="small">{{ item.feePolicyName }}</el-text>
                        </div>
                        <div class="item-meta" v-if="item.endDate && item.endDate !== '长期有效'">
                          <el-text type="warning" size="small">到期: {{ item.endDate }}</el-text>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 其他类型流量部分 -->
                <div v-if="trafficData.latest?.detailed_data?.otherFlow?.length" class="traffic-section">
                  <TrafficProgressBar
                    title="其他类型流量"
                    :used="trafficData.latest.detailed_data.otherFlow.reduce((sum, item) => sum + item.used, 0)"
                    :remaining="trafficData.latest.detailed_data.otherFlow.reduce((sum, item) => sum + item.remaining, 0)"
                    :total="trafficData.latest.detailed_data.otherFlow.reduce((sum, item) => sum + item.total, 0)"
                    type="other"
                    :icon="Grid"
                  />
                  
                  <!-- 其他类型流量详细项 -->
                  <div class="detailed-items">
                    <div v-for="item in trafficData.latest.detailed_data.otherFlow" :key="item.name" class="detailed-item">
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-progress">
                        <el-progress 
                          :percentage="item.usedPercent" 
                          :color="getProgressColor(item.usedPercent)"
                          :show-text="false"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="item-stats">
                        <div class="stat-item used">
                          <el-icon><Download /></el-icon>
                          <span>{{ (item.used / 1024).toFixed(2) }}GB</span>
                        </div>
                        <div class="stat-item remaining">
                          <el-icon><Upload /></el-icon>
                          <span>{{ (item.remaining / 1024).toFixed(2) }}GB</span>
                        </div>
                        <div class="stat-item total">
                          <el-icon><InfoFilled /></el-icon>
                          <span>{{ (item.total / 1024).toFixed(2) }}GB</span>
                        </div>
                      </div>
                      <div class="item-meta">
                        <span v-if="item.feePolicyName" class="policy">{{ item.feePolicyName }}</span>
                        <span v-if="item.endDate" class="end-date">{{ item.endDate }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 短信部分 -->
                <div v-if="trafficData.latest?.detailed_data?.sms?.length" class="traffic-section">
                  <TrafficProgressBar
                    title="短信"
                    :used="trafficData.latest.detailed_data.sms.reduce((sum, item) => sum + item.used, 0)"
                    :remaining="trafficData.latest.detailed_data.sms.reduce((sum, item) => sum + item.remaining, 0)"
                    :total="trafficData.latest.detailed_data.sms.reduce((sum, item) => sum + item.total, 0)"
                    type="sms"
                    :icon="Message"
                  />
                  
                  <!-- 短信详细项 -->
                  <div class="detailed-items">
                    <div v-for="item in trafficData.latest.detailed_data.sms" :key="item.name" class="detailed-item">
                      <div class="item-header">
                        <span class="item-name">{{ item.name }}</span>
                        <el-tag :type="getUsageType(item.used, item.total)" size="small">
                          {{ item.usedPercent }}%
                        </el-tag>
                      </div>
                      <div class="item-progress">
                        <el-progress 
                          :percentage="item.usedPercent" 
                          :color="getProgressColor(item.usedPercent)"
                          :show-text="false"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="item-stats">
                        <div class="stat-item used">
                          <el-icon><Message /></el-icon>
                          <span>{{ item.used }}条</span>
                        </div>
                        <div class="stat-item remaining">
                          <el-icon><Key /></el-icon>
                          <span>{{ item.remaining }}条</span>
                        </div>
                        <div class="stat-item total">
                          <el-icon><InfoFilled /></el-icon>
                          <span>{{ item.total }}条</span>
                        </div>
                      </div>
                      <div class="item-meta">
                        <span v-if="item.feePolicyName" class="policy">{{ item.feePolicyName }}</span>
                        <span v-if="item.endDate" class="end-date">{{ item.endDate }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 数据源信息 -->
                <div v-if="trafficData.latest?.data_source === 'new-api'" class="data-source-info">
                  <el-alert
                    title="新数据源"
                    type="success"
                    :closable="false"
                    show-icon
                  >
                    <template #default>
                      采用新的数据格式，提供更详细的流量信息
                    </template>
                  </el-alert>
                </div>

                <div v-else class="no-detailed-data">
                  <el-empty description="暂无详细数据">
                    <template #image>
                      <el-icon size="60" color="#c0c4cc"><DataBoard /></el-icon>
                    </template>
                    <el-text type="info" size="small">
                      当前数据源可能不支持详细数据展示，请尝试刷新数据
                    </el-text>
                  </el-empty>
                </div>
              </div>
            </el-tab-pane>

            <!-- 历史标签 -->
            <el-tab-pane label="历史" name="history">
              <div class="history-tab-content">
                <h3>历史记录</h3>
                <div class="history-list">
                  <div 
                    v-for="record in trafficData.history" 
                    :key="record.id"
                    class="history-item"
                  >
                    <div class="history-time">{{ formatTime(record.query_time) }}</div>
                    <div class="history-stats">
                      <div class="stat">
                        <span class="label">总流量</span>
                        <span class="value">{{ record.total_traffic?.toFixed(2) }}GB</span>
                      </div>
                      <div class="stat">
                        <span class="label">已用</span>
                        <span class="value">{{ record.used_traffic?.toFixed(2) }}GB</span>
                      </div>
                      <div class="stat">
                        <span class="label">剩余</span>
                        <span class="value">{{ record.remaining_traffic?.toFixed(2) }}GB</span>
                      </div>
                      <div class="stat">
                        <span class="label">跳点</span>
                        <span class="value">{{ record.jump_points }}MB</span>
                      </div>
                      <div class="stat">
                        <span class="label">免流</span>
                        <span class="value">{{ record.freeflow || 0 }}MB</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <!-- 推送标签 -->
            <el-tab-pane label="推送" name="push">
              <div class="push-tab-content">
                <el-empty description="推送功能开发中..." />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div v-else-if="!loading" class="no-data">
          <el-empty description="暂无数据" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  ArrowLeft, 
  Refresh, 
  TrendCharts, 
  DataBoard, 
  Bell, 
  Setting,
  List,
  Connection,
  Grid,
  Phone,
  Message,
  Download,
  Upload,
  InfoFilled,
  Clock,
  Key
} from '@element-plus/icons-vue'
import { getTrafficDetail, getMonitorDetail, refreshTrafficData, refreshMonitorTrafficData } from '@/api/traffic'
import { usePhoneMask } from '@/utils/phoneUtils'
import TrafficProgressBar from '@/components/TrafficProgressBar.vue'

const route = useRoute()
const router = useRouter()
const configId = route.params.configId
const monitorToken = route.params.token
const isMonitorMode = !!monitorToken

// 手机号码脱敏工具
const { maskPhoneNumber } = usePhoneMask()

const loading = ref(false)
const refreshLoading = ref(false)
const trafficData = ref(null)
const activeTab = ref('jump')

// 设备类型检测
const isMobileDevice = computed(() => {
  return window.innerWidth <= 768 || document.body.classList.contains('mobile-device')
})

const isTabletDevice = computed(() => {
  return window.innerWidth > 768 && window.innerWidth <= 1024 || document.body.classList.contains('tablet-device')
})

const isDesktopDevice = computed(() => {
  return window.innerWidth > 1024 || document.body.classList.contains('desktop-device')
})

// 标签配置
const tabs = ref([
  { name: 'jump', label: '跳点', icon: TrendCharts },
  { name: 'detail', label: '详情', icon: DataBoard },
  { name: 'history', label: '历史', icon: List },
  { name: 'push', label: '推送', icon: Bell }
])

const loadTrafficDetail = async () => {
  try {
    loading.value = true
    let response
    
    if (isMonitorMode) {
      // 监控模式：使用令牌访问
      console.log("监控模式：使用令牌访问")
      response = await getMonitorDetail(monitorToken)
    } else {
      // 普通模式：使用配置ID访问（需要认证）
          // console.log("普通模式：使用配置ID访问（需要认证）")
      response = await getTrafficDetail(configId)
    }
    
    trafficData.value = response.data
  } catch (error) {
    console.error('加载流量详情失败:', error)
    ElMessage.error(error.message || '加载流量详情失败')
    
    // 如果加载失败，显示示例数据用于测试
    trafficData.value = {
      config: {
        phone: '13812345678',
        operator: '联通',
        appId: 'demo_app_001'
      },
      latest: {
        total_traffic: 50.0,
        used_traffic: 23.45,
        remaining_traffic: 26.55,
        general_used: 4232.63,
        general_remaining: 36727.37,
        general_total: 40960,
        directed_used: 146381.24,
        directed_remaining: 0,
        directed_total: 5120,
        public_free: 5.14,
        jump_points: 128,
        freeflow: 15.6,
        query_time: new Date().toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          timeZone: 'Asia/Shanghai'
        }).replace(/\//g, '-')
      },
      history: [
        {
          id: 1,
          total_traffic: 50.0,
          used_traffic: 23.45,
          remaining_traffic: 26.55,
          general_used: 4232.63,
          general_remaining: 36727.37,
          general_total: 40960,
          directed_used: 146381.24,
          directed_remaining: 0,
          directed_total: 5120,
          public_free: 5.14,
          jump_points: 128,
          freeflow: 15.6,
          query_time: new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            timeZone: 'Asia/Shanghai'
          }).replace(/\//g, '-')
        },
        {
          id: 2,
          total_traffic: 50.0,
          used_traffic: 22.1,
          remaining_traffic: 27.9,
          general_used: 4232.25,
          general_remaining: 36727.75,
          general_total: 40960,
          directed_used: 145705.44,
          directed_remaining: 0,
          directed_total: 5120,
          public_free: 5.14,
          jump_points: 115,
          freeflow: 12.3,
          query_time: new Date(Date.now() - 1000 * 60 * 30).toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            timeZone: 'Asia/Shanghai'
          }).replace(/\//g, '-')
        }
      ]
    }
  } finally {
    loading.value = false
  }
}

const refreshData = async () => {
  try {
    refreshLoading.value = true
    
    if (isMonitorMode) {
      // 监控模式下调用监控刷新接口
      await refreshMonitorTrafficData(monitorToken)
      ElMessage.success('数据刷新成功')
      await loadTrafficDetail()
    } else {
      // 认证模式下调用刷新接口
      await refreshTrafficData(configId)
      ElMessage.success('数据刷新成功')
      await loadTrafficDetail()
    }
  } catch (error) {
    console.error('刷新数据失败:', error)
    ElMessage.error(error.message || '刷新数据失败')
  } finally {
    refreshLoading.value = false
  }
}

// 计算属性
const currentData = computed(() => {
  return trafficData.value?.latest || {}
})

const previousData = computed(() => {
  return trafficData.value?.history?.[1] || {}
})

const jumpPoints = computed(() => {
  const current = currentData.value.jump_points || 0
  const previous = previousData.value.jump_points || 0
  return Math.abs(current - previous)
})

const freeTraffic = computed(() => {
  return currentData.value.public_free || 0
})

const timeDiff = computed(() => {
  const currentTime = new Date(currentData.value.query_time || Date.now())
  const previousTime = new Date(previousData.value.query_time || Date.now())
  const diffMs = currentTime - previousTime
  const diffMinutes = Math.floor(diffMs / (1000 * 60))
  
  if (diffMinutes < 1) return '刚刚'
  if (diffMinutes < 60) return `${diffMinutes}分钟`
  const diffHours = Math.floor(diffMinutes / 60)
  if (diffHours < 24) return `${diffHours}小时${diffMinutes % 60}分钟`
  const diffDays = Math.floor(diffHours / 24)
  return `${diffDays}天${diffHours % 24}小时`
})

// 格式化方法
const formatTraffic = (mb, showGB = true) => {
  if (!mb && mb !== 0) return '0MB'
  const mbValue = parseFloat(mb)
  if (!showGB || mbValue < 1024) {
    return `${mbValue.toFixed(2)}MB`
  }
  const gbValue = mbValue / 1024
  return `${mbValue.toFixed(2)}MB(${gbValue.toFixed(2)}GB)`
}

const formatTrafficRemaining = (mb) => {
  if (!mb || mb <= 0) return '0'
  return formatTraffic(mb)
}

const formatDetailTime = (time) => {
  if (!time) return ''
  if (typeof time === 'string' && time.includes('-')) {
    return time
  }
  return new Date(time).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZone: 'Asia/Shanghai'
  }).replace(/\//g, '-')
}

// 获取使用率类型
const getUsageType = (used, total) => {
  if (!total || total === 0) return 'info'
  const percentage = (used / total) * 100
  if (percentage >= 90) return 'danger'
  if (percentage >= 70) return 'warning'
  if (percentage >= 50) return 'primary'
  return 'success'
}

// 获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage >= 90) return '#f56c6c'
  if (percentage >= 70) return '#e6a23c'
  if (percentage >= 50) return '#409eff'
  return '#67c23a'
}

const formatTime = (time) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN', {
    timeZone: 'Asia/Shanghai'
  })
}

const handleBackHome = () => {
  if (isMonitorMode) {
    // 监控模式下不允许访问主页，跳转到令牌获取页面
    router.push('/gettoken')
  } else {
    // 认证模式下跳转到流量监控页面
    router.push('/traffic-monitor')
  }
}

onMounted(() => {
  // 如果是监控模式，设置会话标记
  if (isMonitorMode) {
    sessionStorage.setItem('isMonitorMode', 'true')
  }
  
  loadTrafficDetail()
  //  refreshData()
  
  // 自动刷新，每30秒刷新一次
  // const interval = setInterval(() => {
  //   if (!refreshLoading.value) {
  //     refreshData()
  //   }
  // }, 30000)
  
  // 组件卸载时清除定时器
  // onUnmounted(() => {
  //   clearInterval(interval)
  // })
})
</script>

<style scoped>
.traffic-detail {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.traffic-detail.mobile-layout {
  background: #f8f9fa;
}

/* 桌面端样式 */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0 20px;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
}

.actions {
  display: flex;
  gap: 10px;
}

.el-main {
  padding: 15px 20px;
}

.traffic-container {
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - 100px);
}

/* 移动端样式 */
.mobile-header {
  height: 60px !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.mobile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  color: white;
  padding: 0 16px;
}

.mobile-header-content h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.mobile-back-btn,
.mobile-refresh-btn {
  color: white !important;
  font-size: 20px;
  padding: 8px !important;
  width: 40px;
  height: 40px;
}

.main-content {
  flex: 1;
  padding: 0 !important;
  overflow: hidden;
}

.mobile-layout .traffic-container {
  max-width: 100%;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mobile-tabs {
  background: white;
  border-bottom: 1px solid #eee;
  position: sticky;
  /* top: 60px; */
  z-index: 999;
}

.mobile-tab-nav {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

.mobile-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 6px;
  min-width: 60px;
}

.mobile-tab-item.active {
  color: #667eea;
  background-color: #f0f4ff;
}

.mobile-tab-item .el-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.mobile-tab-item span {
  font-size: 12px;
  font-weight: 500;
}

.mobile-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

.mobile-tab-content {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 移动端概览卡片 */
.mobile-overview-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.mobile-stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}



.mobile-stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1.2;
}

.mobile-stat-value.jump {
  color: #f56c6c;
}

.mobile-stat-value.free {
  color: #e6a23c;
}

.mobile-stat-value.used {
  color: #f56c6c;
}

.mobile-stat-value.remaining {
  color: #67c23a;
}

.mobile-stat-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.time-info-card {
  background: white;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.time-diff-info {
  font-size: 14px;
  color: #909399;
}

/* 移动端数据区域 */
.mobile-data-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  text-align: center;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
  font-size: 14px;
}

.section-title.current {
  color: #67c23a;
  border-bottom-color: #67c23a;
}

.section-title.previous {
  color: #409eff;
  border-bottom-color: #409eff;
}

.mobile-traffic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.traffic-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #eee;
}

.traffic-grid-item.wide {
  grid-column: 1 / -1;
}

.traffic-grid-item .label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  text-align: center;
}

.traffic-grid-item .value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

/* 移动端信息卡片 */
.mobile-info-card,
.mobile-category-card,
.mobile-history-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 移动端历史Tab内容 */
.mobile-history-content {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin: 16px;
}

.mobile-history-content h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
}

.mobile-history-content .mobile-history-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 0 4px;
}

.mobile-history-content .history-item {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.mobile-history-content .history-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.mobile-history-content .history-time {
  text-align: center;
  font-weight: 500;
  color: #666;
  margin-bottom: 10px;
  padding: 4px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 12px;
}

.mobile-history-content .history-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mobile-history-content .history-stats .stat {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  border: 1px solid #e9ecef;
}

.mobile-history-content .history-stats .stat .label {
  font-size: 10px;
  color: #999;
  margin-bottom: 4px;
  display: block;
}

.mobile-history-content .history-stats .stat .value {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  display: block;
}

.mobile-info-card h4,
.mobile-category-card h4,
.mobile-history-card h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-size: 14px;
  color: #666;
}

.info-item .value {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* 移动端统计网格 */
.mobile-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 576px) {
  .mobile-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 分类网格 */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 576px) {
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.category-section h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #409eff;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}

.category-item:last-child {
  border-bottom: none;
}

.jump-points-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  font-weight: 600;
  color: #e6a23c;
  margin-bottom: 8px;
}

.freeflow-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f0f9ff;
  border-radius: 8px;
  font-weight: 600;
  color: #409eff;
}

/* 移动端历史记录 */
.mobile-history-list {
  max-height: 400px;
  overflow-y: auto;
}

.history-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #eee;
}

.history-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  text-align: center;
}



.history-stats {
  /* display: grid; */
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.history-stats .stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.history-stats .label {
  color: #666;
}

.history-stats .value {
  font-weight: 600;
  color: #333;
}

/* 移动端空状态 */
.mobile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ddd;
}

/* 移动端详情Tab样式 */
.mobile-package-header {
  background: white;
  border-radius: 12px;
  padding: 20px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid #e0e0e0;
}

.mobile-package-name {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.mobile-package-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.mobile-phone-operator {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.mobile-update-time {
  font-size: 12px;
  color: #999;
}

.mobile-jump-freeflow-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.mobile-jump-freeflow-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-jump-freeflow-item:last-child {
  border-bottom: none;
}

.mobile-jump-freeflow-item .label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.mobile-jump-freeflow-item .value {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
}

.mobile-traffic-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.mobile-detailed-list {
  margin-top: 16px;
}

.mobile-detailed-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.mobile-detailed-item:last-child {
  margin-bottom: 0;
}

.mobile-detailed-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.mobile-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.mobile-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 8px;
}

.mobile-item-details {
  margin-top: 10px;
}

.mobile-item-progress {
  margin-bottom: 10px;
}

.mobile-item-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.mobile-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
  font-weight: 500;
}

.mobile-stat-item .el-icon {
  font-size: 14px;
  min-width: 16px;
}

.mobile-stat-item.used .el-icon {
  color: #e6a23c;
}

.mobile-stat-item.remaining .el-icon {
  color: #67c23a;
}

.mobile-stat-item.total .el-icon {
  color: #409eff;
}

.mobile-stat-item .value {
  font-weight: 600;
}

.mobile-stat-item.used .value {
  color: #e6a23c;
}

.mobile-stat-item.remaining .value {
  color: #67c23a;
}

.mobile-stat-item.total .value {
  color: #409eff;
}

.mobile-item-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e9ecef;
}

.mobile-data-source-info {
  margin-bottom: 16px;
}

.mobile-no-detailed-data {
  text-align: center;
  padding: 40px 20px;
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
  .mobile-detailed-item {
    cursor: pointer;
    user-select: none;
    min-height: 44px;
  }
  
  .mobile-detailed-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .mobile-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .mobile-item-name {
    font-size: 13px;
    margin-right: 0;
  }
  
  .mobile-item-progress {
    margin-bottom: 8px;
  }
  
  .mobile-item-stats {
    gap: 6px;
    margin-bottom: 6px;
  }
  
  .mobile-stat-item {
    font-size: 11px;
    gap: 4px;
  }
  
  .mobile-stat-item .el-icon {
    font-size: 13px;
  }
  
  .mobile-stat-item .value {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .mobile-package-header {
    padding: 16px 12px;
    margin-bottom: 12px;
  }
  
  .mobile-package-name {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .mobile-package-meta {
    gap: 4px;
  }
  
  .mobile-phone-operator {
    font-size: 13px;
  }
  
  .mobile-update-time {
    font-size: 11px;
  }
  
  .mobile-jump-freeflow-section {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .mobile-jump-freeflow-item {
    padding: 6px 0;
  }
  
  .mobile-jump-freeflow-item .label {
    font-size: 13px;
  }
  
  .mobile-jump-freeflow-item .value {
    font-size: 15px;
  }
  
  .mobile-traffic-section {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .mobile-detailed-list {
    margin-top: 12px;
  }
  
  .mobile-detailed-item {
    padding: 10px;
    margin-bottom: 8px;
  }
  
  .mobile-item-header {
    gap: 4px;
    margin-bottom: 6px;
  }
  
  .mobile-item-name {
    font-size: 12px;
  }
  
  .mobile-item-progress {
    margin-bottom: 6px;
  }
  
  .mobile-item-stats {
    gap: 4px;
    margin-bottom: 4px;
  }
  
  .mobile-stat-item {
    font-size: 10px;
    gap: 3px;
  }
  
  .mobile-stat-item .el-icon {
    font-size: 12px;
  }
  
  .mobile-stat-item .value {
    font-size: 10px;
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .mobile-content {
    padding: 8px;
    /* margin-top: 70px; */
  }
  
  .mobile-overview-cards {
    grid-template-columns: 1fr;
  }
  
  .mobile-stat-value {
    font-size: 20px;
  }
  
  .mobile-traffic-grid {
    grid-template-columns: 1fr;
  }
  
  .history-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* 桌面端样式保护 */
@media (min-width: 769px) {
  .traffic-detail:not(.mobile-layout) .el-header {
    height: 60px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;

   
  }
  
  .traffic-detail:not(.mobile-layout) .header-content {
    height: 100%;
    color: white;
    padding: 0 20px;
  }
  
  .traffic-detail:not(.mobile-layout) .header-content h1 {
    color: white;
    font-weight: 600;
  }
  
  .traffic-detail:not(.mobile-layout) .actions .el-button {
    background: #667eea;
    border-color: #667eea;
    color: white;
  }
}

/* 桌面端样式保持不变 */
.desktop-tabs {
  height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.desktop-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 15px 20px;
}

/* 跳点标签内容 */
.jump-tab-content {
  padding: 0;
  height: 100%;
  overflow-y: auto;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 15px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.jump-points {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
}
.free-traffic {
  color: #e6a23c;
  font-weight: bold;
  font-size: 16px;
}

.time-diff {
  color: #909399;
  font-size: 14px;
}

.time-title {
  text-align: center;
  font-weight: bold;
  margin: 15px 0 10px 0;
  font-size: 15px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  border-left: 3px solid;
}

.time-title.current {
  color: #67c23a;
  border-left-color: #67c23a;
}

.time-title.previous {
  color: #409eff;
  border-left-color: #409eff;
}

.traffic-data {
  margin-bottom: 20px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.traffic-data .traffic-item {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0;
}

.current-data .traffic-item {
  color: #67c23a;
}

.previous-data .traffic-item {
  color: #409eff;
}

/* 详情标签内容 */
.detail-tab-content {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  background: #f8f9fa;
}

/* 套餐头部样式 */
.package-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid #e0e0e0;
}

.package-name {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.package-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.phone-operator {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.update-time {
  font-size: 14px;
  color: #999;
}

/* 跳点和免流信息样式 */
.jump-freeflow-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.jump-freeflow-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.jump-freeflow-item:last-child {
  border-bottom: none;
}

.jump-freeflow-item .label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.jump-freeflow-item .value {
  font-size: 18px;
  font-weight: 700;
  color: #409eff;
}

/* 流量部分样式 */
.traffic-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.traffic-section:last-child {
  margin-bottom: 0;
}

/* 详细项样式 */
.detailed-items {
  margin-top: 20px;
}

.detailed-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.detailed-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.detailed-item:last-child {
  margin-bottom: 0;
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
  .detailed-item {
    cursor: pointer;
    user-select: none;
  }
  
  .detailed-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.item-progress {
  margin-bottom: 12px;
}

.item-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #666;
}

.item-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.policy {
  color: #409eff;
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.end-date {
  color: #e6a23c;
  background: #fdf6ec;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 详细卡片样式 */
.detailed-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.detailed-list {
  margin-top: 16px;
}

/* 详细列表配色方案 */
.detailed-list .stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #606266; /* 保持标签文字颜色不变 */
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
  .detailed-list .stat-item {
    min-height: 44px; /* 确保触摸目标足够大 */
    padding: 4px 0;
  }
  
  .detailed-list .stat-item .el-icon {
    min-width: 16px; /* 确保图标有固定宽度 */
  }
  
  /* 历史Tab触摸优化 */
  .history-item {
    cursor: pointer;
    user-select: none;
    min-height: 44px; /* 确保触摸目标足够大 */
  }
  
  .history-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .history-stats .stat {
    min-height: 44px; /* 确保触摸目标足够大 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/* 已用数据 - 图标和数值使用橙色 */
.detailed-list .stat-item.used .el-icon {
  color: #e6a23c;
}

/* 剩余数据 - 图标和数值使用绿色 */
.detailed-list .stat-item.remaining .el-icon {
  color: #67c23a;
}

/* 总流量 - 图标和数值使用蓝色 */
.detailed-list .stat-item.total .el-icon {
  color: #409eff;
}

/* 已用数据数值 - 橙色加粗 */
.detailed-list .stat-item.used .value {
  color: #e6a23c;
  font-weight: 600;
}

/* 剩余数据数值 - 绿色加粗 */
.detailed-list .stat-item.remaining .value {
  color: #67c23a;
  font-weight: 600;
}

/* 总流量数值 - 蓝色加粗 */
.detailed-list .stat-item.total .value {
  color: #409eff;
  font-weight: 600;
}

.item-details {
  margin-top: 12px;
}

.detail-tab-content .info-card {
  margin-bottom: 15px;
}

.detail-tab-content .stats-row {
  margin-bottom: 15px;
}

.detail-tab-content .stat-card {
  text-align: center;
}

.detail-tab-content .stat-content {
  padding: 15px 0;
}

.detail-tab-content .stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.detail-tab-content .stat-value.used {
  color: #f56c6c;
}

.detail-tab-content .stat-value.remaining {
  color: #67c23a;
}

.detail-tab-content .stat-label {
  font-size: 14px;
  color: #909399;
}

.detail-tab-content .detail-card {
  margin-bottom: 15px;
}

.detail-tab-content .detail-card h4 {
  margin: 0 0 15px 0;
  color: #409eff;
}

.detail-tab-content .traffic-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-tab-content .traffic-item .value {
  font-weight: bold;
  color: #606266;
}

.detail-tab-content .jump-points-detail {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.detail-tab-content .jump-points-detail .value {
  color: #e6a23c;
}

.detail-tab-content .freeflow-detail {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
}

.detail-tab-content .freeflow-detail .value {
  color: #409eff;
}

.detail-tab-content .history-card {
  margin-bottom: 15px;
}

/* 推送和历史标签内容 */
.push-tab-content,
.history-tab-content {
  padding: 40px 20px;
  height: 100%;
  overflow-y: auto;
}

/* 历史标签内容样式 */
.history-tab-content h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.history-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.history-time {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  font-weight: 500;
}

.history-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.history-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.history-stats .stat .label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.history-stats .stat .value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Element Plus 分割线样式调整 */
:deep(.el-divider--horizontal) {
  margin: 8px 0;
}

/* 标签卡片样式 */
:deep(.el-tabs--border-card) {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

:deep(.el-tabs--border-card .el-tabs__content) {
  padding: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .traffic-container {
    max-width: 100%;
  }
  
  .header-content {
    flex-direction: column;
    gap: 10px;
    padding: 10px 20px;
  }
  
  .header-content h1 {
    font-size: 20px;
  }
  
  .actions {
    flex-direction: column;
    width: 100%;
  }
  
  .detail-tab-content {
    padding: 16px;
  }
  
  .package-header {
    padding: 20px;
  }
  
  .package-name {
    font-size: 20px;
  }
  
  .phone-operator {
    font-size: 14px;
  }
  
  .jump-freeflow-section,
  .traffic-section {
    padding: 16px;
  }
  
  .item-stats {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .detail-tab-content {
    padding: 12px;
  }
  
  .package-header {
    padding: 16px;
  }
  
  .package-name {
    font-size: 18px;
  }
  
  .jump-freeflow-section,
  .traffic-section {
    padding: 12px;
  }
}

.no-data {
  text-align: center;
  padding: 50px 0;
}

/* 公免流量卡片样式 */
.public-free-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  margin-bottom: 20px;
  text-align: center;
}

.public-free-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.public-free-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.public-free-icon {
  font-size: 20px;
  color: #667eea;
}

.public-free-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.public-free-value {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 流量进度条区域样式 */
.traffic-progress-section {
  margin-bottom: 20px;
}

/* 移动端公免流量卡片适配 */
@media (max-width: 768px) {
  .public-free-card {
    padding: 20px;
    margin-bottom: 16px;
  }
  
  .public-free-title {
    font-size: 16px;
  }
  
  .public-free-value {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .public-free-card {
    padding: 16px;
  }
  
  .public-free-header {
    flex-direction: column;
    gap: 4px;
  }
}

/* 简化的流量概览样式 */
.traffic-overview {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.overview-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
}

.overview-header h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
}

.overview-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #6c757d;
}

.update-time {
  color: #409eff;
  font-weight: 500;
}

.traffic-progress-section {
  margin-bottom: 20px;
}

.jump-freeflow-info {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.info-item .label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.info-item .value {
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
}

/* 详细数据部分样式 */
.detailed-data-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #e9ecef;
}

.data-source-alert {
  margin-bottom: 20px;
}

.detailed-data-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detailed-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detailed-card :deep(.el-card__header) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  padding: 16px 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #2c3e50;
}

.card-header .el-icon {
  font-size: 18px;
  color: #409eff;
}

.detailed-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.detailed-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.detailed-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-name {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.item-progress {
  margin-bottom: 8px;
}

.item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6c757d;
}

.stat-item .el-icon {
  font-size: 16px;
  color: #409eff;
}

.item-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e9ecef;
}

.no-detailed-data {
  text-align: center;
  padding: 60px 20px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  /* 详情标签页移动端适配 */
  .detail-tab-content {
    padding: 16px !important;
  }
  
  /* 套餐头部移动端适配 */
  .package-header {
    padding: 16px !important;
    margin-bottom: 16px;
  }
  
  .package-name {
    font-size: 20px !important;
    margin-bottom: 12px;
  }
  
  .package-meta {
    gap: 6px;
  }
  
  .phone-operator {
    font-size: 14px !important;
  }
  
  .update-time {
    font-size: 12px !important;
  }
  
  /* 跳点和免流信息移动端适配 */
  .jump-freeflow-section {
    padding: 16px !important;
    margin-bottom: 16px;
  }
  
  .jump-freeflow-item {
    padding: 8px 0;
  }
  
  .jump-freeflow-item .label {
    font-size: 14px;
  }
  
  .jump-freeflow-item .value {
    font-size: 16px;
  }
  
  /* 流量部分移动端适配 */
  .traffic-section {
    padding: 16px !important;
    margin-bottom: 16px;
  }
  
  /* 详细项移动端适配 */
  .detailed-items {
    margin-top: 16px;
  }
  
  .detailed-item {
    padding: 12px !important;
    margin-bottom: 10px;
  }
  
  .item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .item-name {
    font-size: 14px !important;
  }
  
  .item-progress {
    margin-bottom: 10px;
  }
  
  .item-stats {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .stat-item {
    justify-content: flex-start;
    font-size: 12px !important;
  }
  
  .stat-item .el-icon {
    font-size: 14px;
  }
  
  /* 详细列表移动端适配 */
  .detailed-list {
    margin-top: 16px;
    padding: 0;
  }
  
  .detailed-list .detailed-item {
    padding: 12px !important;
    margin-bottom: 10px;
  }
  
  .detailed-list .item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
  }
  
  .detailed-list .item-name {
    font-size: 14px !important;
  }
  
  .detailed-list .item-details {
    margin-top: 10px;
  }
  
  .detailed-list .item-progress {
    margin-bottom: 10px;
  }
  
  .detailed-list .item-stats {
    flex-direction: column;
    gap: 8px;
  }
  
  .detailed-list .stat-item {
    font-size: 12px !important;
    gap: 4px;
  }
  
  .detailed-list .stat-item .el-icon {
    font-size: 14px;
  }
  
  .detailed-list .value {
    font-size: 12px !important;
  }
  
  /* 历史Tab移动端适配 */
  .history-tab-content {
    padding: 16px !important;
  }
  
  .history-tab-content h3 {
    font-size: 18px !important;
    margin-bottom: 16px;
    text-align: center;
  }
  
  .history-list {
    gap: 12px;
  }
  
  .history-item {
    padding: 12px !important;
    margin-bottom: 8px;
  }
  
  .history-time {
    font-size: 13px !important;
    margin-bottom: 10px;
    text-align: center;
  }
  
  .history-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .history-stats .stat {
    padding: 8px 4px;
  }
  
  .history-stats .stat .label {
    font-size: 11px !important;
    margin-bottom: 4px;
  }
  
  .history-stats .stat .value {
    font-size: 13px !important;
  }
  
  /* 其他通用移动端适配 */
  .traffic-overview {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .overview-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  
  .overview-header h3 {
    font-size: 18px;
  }
  
  .overview-meta {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .jump-freeflow-info {
    gap: 20px;
    padding-top: 12px;
  }
  
  .info-item .value {
    font-size: 16px;
  }
  
  .detailed-data-section {
    margin-top: 16px;
    padding-top: 16px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  /* 详情标签页超小屏幕适配 */
  .detail-tab-content {
    padding: 12px !important;
  }
  
  /* 套餐头部超小屏幕适配 */
  .package-header {
    padding: 12px !important;
    margin-bottom: 12px;
  }
  
  .package-name {
    font-size: 18px !important;
    margin-bottom: 10px;
  }
  
  .package-meta {
    gap: 4px;
  }
  
  .phone-operator {
    font-size: 13px !important;
  }
  
  .update-time {
    font-size: 11px !important;
  }
  
  /* 跳点和免流信息超小屏幕适配 */
  .jump-freeflow-section {
    padding: 12px !important;
    margin-bottom: 12px;
  }
  
  .jump-freeflow-item {
    padding: 6px 0;
  }
  
  .jump-freeflow-item .label {
    font-size: 13px;
  }
  
  .jump-freeflow-item .value {
    font-size: 15px;
  }
  
  /* 流量部分超小屏幕适配 */
  .traffic-section {
    padding: 12px !important;
    margin-bottom: 12px;
  }
  
  /* 详细项超小屏幕适配 */
  .detailed-items {
    margin-top: 12px;
  }
  
  .detailed-item {
    padding: 10px !important;
    margin-bottom: 8px;
  }
  
  .item-header {
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .item-name {
    font-size: 13px !important;
  }
  
  .item-progress {
    margin-bottom: 8px;
  }
  
  .item-stats {
    gap: 6px;
    margin-bottom: 6px;
  }
  
  .stat-item {
    font-size: 11px !important;
  }
  
  .stat-item .el-icon {
    font-size: 13px;
  }
  
  /* 详细列表超小屏幕适配 */
  .detailed-list {
    margin-top: 12px;
  }
  
  .detailed-list .detailed-item {
    padding: 10px !important;
    margin-bottom: 8px;
  }
  
  .detailed-list .item-header {
    gap: 4px;
    margin-bottom: 8px;
  }
  
  .detailed-list .item-name {
    font-size: 13px !important;
  }
  
  .detailed-list .item-details {
    margin-top: 8px;
  }
  
  .detailed-list .item-progress {
    margin-bottom: 8px;
  }
  
  .detailed-list .item-stats {
    gap: 6px;
  }
  
  .detailed-list .stat-item {
    font-size: 11px !important;
    gap: 3px;
  }
  
  .detailed-list .stat-item .el-icon {
    font-size: 13px;
  }
  
  .detailed-list .value {
    font-size: 11px !important;
  }
  
  /* 历史Tab超小屏幕适配 */
  .history-tab-content {
    padding: 12px !important;
  }
  
  .history-tab-content h3 {
    font-size: 16px !important;
    margin-bottom: 12px;
  }
  
  .history-list {
    gap: 8px;
  }
  
  .history-item {
    padding: 10px !important;
    margin-bottom: 6px;
  }
  
  .history-time {
    font-size: 12px !important;
    margin-bottom: 8px;
  }
  
  .history-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .history-stats .stat {
    padding: 6px 2px;
  }
  
  .history-stats .stat .label {
    font-size: 10px !important;
    margin-bottom: 3px;
  }
  
  .history-stats .stat .value {
    font-size: 12px !important;
  }
  
  /* 其他通用超小屏幕适配 */
  .traffic-overview {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .overview-header h3 {
    font-size: 16px;
  }
  
  .overview-meta {
    font-size: 12px;
  }
  
  .jump-freeflow-info {
    gap: 16px;
  }
  
  .info-item .label {
    font-size: 12px;
  }
  
  .info-item .value {
    font-size: 14px;
  }
  
  .detailed-data-section {
    margin-top: 12px;
    padding-top: 12px;
  }
}
</style>
